<!-- 投标者数据 -->
<script setup>

import { ref,computed,onMounted} from 'vue'
import {allbidder} from '@/api/bidding.js'

const bidder = ref([

])

const show=async ()=>{
       let result=await allbidder();
       bidder.value=result.data;
    }
// 在组件挂载时加载数据
onMounted(() => {
  show()
})


// 所有表格数据
const tableData = ref([

]);

//用户搜索时选中的分类
const manufacturer=ref('')

//用户搜索时选中的状态
const state=ref('')

import { allTendererInfo,select} from '@/api/tendererInfo.js';

const TendererInfo=async()=>{
    let params={
        manufacturer: manufacturer.value ? manufacturer.value : null,
        state: state.value ? state.value : null
    }
   let result=await select(params)
   console.log(result);
   tableData.value=result.data
}
TendererInfo()

const reset=()=>{
    manufacturer.value='';
    state.value='';
    window.location.reload();
}

// 分页状态
const currentPage = ref(1); // 当前页
const pageSize = ref(10);    // 每页显示的数据量

// 计算当前页展示的数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});

// 分页切换处理
const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>招标信息查询</span>
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="招标单位：">
                <el-select placeholder="请选择" v-model="manufacturer">
                    <el-option
                        v-for="c in bidder"
                        :key="c.id"
                        :label="c.name"
                        :value="c.name">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="项目状态：">
                <el-select placeholder="请选择" v-model="state">
                    <el-option label="招标" value="招标"></el-option>
                    <el-option label="中标" value="中标"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="TendererInfo">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="currentPageData" style="width: 100%">
            <el-table-column label="编号" prop="tenderProjectNo"></el-table-column>
            <el-table-column label="药品名称" prop="drugName"></el-table-column>
            <el-table-column label="制药单位" prop="manufacturer"></el-table-column>
            <el-table-column label="包装要求" prop="packagingReq"></el-table-column>
            <el-table-column label="总量"  prop="totalNumber"></el-table-column>
            <el-table-column label="截止日期" prop="tenderDeadline"></el-table-column>
            <el-table-column label="保证金" prop="bidDeposit"></el-table-column>
            <el-table-column label="项目状态" prop="state"></el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>
        <!-- 分页条 -->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length"
                :current-page="currentPage"
                :page-size="pageSize"
                @current-change="handlePageChange" />
    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 70vh; /* 设置为视口的 80%，避免过高 */
    max-height: 80vh; /* 最大高度设置为视口的 90%，防止过高 */
    width: 90%;
    box-sizing: border-box;
    padding: 20px; /* 给容器一些内边距 */
    overflow: auto; /* 当内容超出时允许滚动 */
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px; /* 你可以根据需要调整字体大小 */
}

.el-form-item {
    margin-bottom: 16px; /* 适当增加表单项之间的间距 */
}

.el-table {
    width: 100%;
    margin-top: 20px; /* 表格与其他内容之间的间距 */
}

.el-pagination {
    margin-top: 20px;
    justify-content: flex-end;
    padding-top: 20px;
    padding-bottom: 20px;
}

.el-button {
    font-size: 14px;
    margin-right: 8px;
}

.el-table-column {
    padding: 10px;
}
.el-select {
  width: 130px;
}
</style>
